<template>
  <div>
    {{ dataList.length }}
    <el-button @click="add">1000000条数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
    };
  },
  //使用Object.freeze冻结arr对象,这样在this.dataList = Object.freeze(arr);赋值的时候就不会进行vue的双向数据绑定,会剩下很多的时间,
  //如果不冻结,赋值的时候会进行双向数据绑定,会浪费很多的时间,可以利用浏览器的性能面板进行查看
  methods: {
    add() {
      let arr = [];
      this.dataList = [];
      for (let i = 0; i < 1000000; i++) {
        let obj = {
          a: i,
        };
        arr.push(obj);
      }
      this.fu(arr);
    },
    fu(arr) {
      this.dataList = Object.freeze(arr);
    },
  },
};
</script>

<style></style>
